<template>
  <div>
    <!-- 搜索框 -->
    <van-search class="box" shape="round" background="white" placeholder="请输入搜索关键词" />
    <!-- 全部分类 -->
    <van-tabs class="box1" shrink>
      <van-tab :title="'全部'"></van-tab>
      <van-tab :title="'外套'"></van-tab>
      <van-tab :title="'户外包'"></van-tab>、
      <van-tab :title="'外套'"></van-tab>
      <van-tab :title="'户外包'"></van-tab>
    </van-tabs>
    <!-- 销量库存分类 -->
    <div>

    </div>
    <div class="box4">
      <!-- 侧边导航 -->
      <van-sidebar class="box3">
        <van-sidebar-item title="上衣" />
        <van-sidebar-item title="帐篷" />
        <van-sidebar-item title="户外伞" />
        <van-sidebar-item title="背包" />
      </van-sidebar>
      <!-- 商品信息 -->
      <div class="shoppinglist" @click="$router.push('/home/productdetails')">
        <div class="bg">
          <img src="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
          <div>
           <ul >
              <li>恩康电子烟2019新</li>
             <li>￥249 <span>2294人付款</span></li>
             <li>已售/库存: <span>16/100</span></li>
           </ul>
          </div>
        </div>
        <div class="bg">
          <img src="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
          <div>
           <ul >
              <li>恩康电子烟2019新</li>
             <li>￥249 <span>2294人付款</span></li>
             <li>已售/库存: <span>16/100</span></li>
           </ul>
          </div>
        </div>
        <div class="bg">
          <img src="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
          <div>
           <ul >
              <li>恩康电子烟2019新</li>
             <li>￥249 <span>2294人付款</span></li>
             <li>已售/库存: <span>16/100</span></li>
           </ul>
          </div>
        </div>
        <div class="bg">
          <img src="https://img1.baidu.com/it/u=2445582618,2632498342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
          <div>
           <ul >
              <li>恩康电子烟2019新</li>
             <li>￥249 <span>2294人付款</span></li>
             <li>已售/库存: <span>16/100</span></li>
           </ul>
          </div>
        </div>
      </div>
      
    </div>
    
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.bg{
  background-color: #c6c6c6;
  margin-bottom: 20px;
}
.box {
  border-top: 1px solid rgb(235, 231, 231);
  border-bottom: 1px solid rgb(235, 231, 231);
}

.box1 {
  /* border-top: 1px solid gray; */
  border-bottom: 1px solid rgb(235, 231, 231);
}

.box2 {
  border-bottom: 1px solid rgb(235, 231, 231);
}

.box3 {
  margin-top: 20px;
}

.box4 {
  display: flex;
  background-color: rgb(247, 248, 250);
}

.shoppinglist {
  width: 170px;
  background-color: white;
  padding: 10px;
  margin-left: 20px;
}

img {
  width: 100%;
}

ul {
  width: 100%;
  text-align: center;
}

li {
  margin-top: 10px;
}

li:nth-child(1) {
  font-weight: bold;
}

li:nth-child(2) {
  color: red;
  font-weight: 600;
}

li:nth-child(2)>span {
  color: rgb(153, 153, 153);
  margin-left: 3px;
  font-weight: 500;
}

li:nth-child(3) {
  color: rgb(153, 153, 153);
  font-weight: 400;
}

li:nth-child(3)>span {
  color: red;
  margin-left: 5px;
  font-weight: 500;
}
</style>